<template>
  <div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="navigation">
      <div class="item" :class="{ active: selectedId === 0 }" @click="change(0)">
        <img v-show="(selectedId === 0)" src="@/assets/homePageActive.png" />
        <img v-show="(selectedId !== 0)" src="@/assets/homePage.png" />
        首页
      </div>
      <div class="item" :class="{ active: selectedId === 1 }" @click="change(1)">
        <img v-show="(selectedId === 1)" src="@/assets/mineActive.png" />
        <img v-show="(selectedId !== 1)" src="@/assets/mine.png" />
        我的
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paths: [
        "HomePage",
        "Mine"
      ],
      selectedId: 0,
    };
  },
  methods: {
    change(val) {
      this.selectedId = val
      this.$store.commit('setTopBar', val)
      this.$router.push({name: this.paths[val]})
    }
  },
  created() {
    this.selectedId = this.$store.getters.getTopBar
  }
};
</script>

<style scoped>
.content {
  width: 100vw;
  height: calc(100vh - 50px);
  overflow: auto;
}

.navigation {
  width: 100vw;
  height: 50px;
  display: flex;
  justify-content: space-around;
}

.item {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #d5ebe1;
}

.item.active {
  color: #80a492;
}
</style>